<template>
  <div id="flowDefinitionDiv">
    <Breadcrumb content="流程管理" />
    <div class="bodyContent">
      <Splitpanes>
      <Pane size="33">
        <vxe-toolbar perfect>
          <template #buttons>
            <div class="smallToolTitle">流程定义</div>
            <vxe-input style="width: 130px" v-model="searchForm.searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="findDefinitionList" @keyup="keyupEnter"
              @search-click="findDefinitionList"></vxe-input>
            <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="dLoading" @click="findDefinitionList"></vxe-button>
            <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="新建" @click="addDefinitionDialog()"></vxe-button>
          </template>
        </vxe-toolbar>

        <div class="tableBox">
          <vxe-table ref="definitionRef" class="mytable-scrollbar" border="inner" align="left" height="auto" :loading="dLoading" :data="definitionList"
            :expand-config="{ expandAll: true, reserve: true }" @current-change="definitionRowClick" :row-config="{ isCurrent: true, isHover: true }" :keyboard-config="{
              isArrow: true,
              isTab: true,
              isEdit: true
            }" resizable show-overflow keep-source>
            <vxe-column field="code" title="编码"> </vxe-column>
            <vxe-column field="name" title="名称"> </vxe-column>

            <vxe-column field="isEnable" title="是否启用" width="60">
              <template #default="{ row }">
                <el-tag :type="getIsEnableTagType(row)">{{ getIsEnableTagDesc(row) }}</el-tag>
              </template>
            </vxe-column>
            <vxe-column title="操作" width="90" align="center" fixed="right">
              <template #default="{ row }">
                <vxe-button type="text" status="primary" icon="vxe-icon-edit" circle @click.native="editDefinitionDialog(row)" class="spanIcon"></vxe-button>
                <vxe-button type="text" status="danger" icon="vxe-icon-delete" circle @click.native="deleteDefinition(row)" class="spanIcon"></vxe-button>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </Pane>
      <Pane size="33">
        <vxe-toolbar perfect>
          <template #buttons>
            <div class="smallToolTitle">流程节点</div>
            <!-- <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="nLoading" @click="getNodeList"></vxe-button> -->
            <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="添加节点" @click="addNodeDialog()"></vxe-button>
          </template>
        </vxe-toolbar>

        <div class="designTable">
          <vxe-table class="mytable-scrollbar" border="inner" align="left" ref="nodeRef" height="auto" :loading="nLoading" :row-config="{ isCurrent: true, isHover: true }" :data="nodeList"
            :column-config="{ resizable: true }" @current-change="nodeRowClick" :edit-config="{
              trigger: 'click',
              mode: 'cell',
              showIcon: false,
              showStatus: true
            }" :keyboard-config="{
              isArrow: true,
              isTab: true,
              isEdit: true
            }" resizable show-overflow keep-source>
            <vxe-column field="name" title="名称"> </vxe-column>
            <vxe-column field="code" title="编码"> </vxe-column>
            <vxe-column field="url" title="路径"> </vxe-column>
            <vxe-column field="seq" title="顺序" width="80"> </vxe-column>
            <vxe-column title="操作" width="90" align="center" fixed="right">
              <template #default="{ row }">
                <vxe-button type="text" status="primary" icon="vxe-icon-edit" circle @click.native="editNodeDialog(row)" v-show="row.activityType=='flowEvent'" class="spanIcon"></vxe-button>
                <vxe-button type="text" status="danger" icon="vxe-icon-delete" circle @click.native="deleteNode(row)" v-show="row.activityType=='flowEvent'" class="spanIcon"></vxe-button>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </Pane>
      <Pane size="33">
        <vxe-toolbar perfect>
          <template #buttons>
            <div class="smallToolTitle">节点事件</div>
            <!-- <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="eLoading" @click="getEventList"></vxe-button> -->
            <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="添加事件" @click="addEventDialog()"></vxe-button>
          </template>
        </vxe-toolbar>

        <div class="designTable">
          <vxe-table class="mytable-scrollbar" border="inner" align="left" ref="eventRef" height="auto" :loading="eLoading" :data="eventList">
            <vxe-column field="name" title="事件"> </vxe-column>
            <vxe-column field="nextNodeText" title="下一节点"> </vxe-column>
            <vxe-column field="seq" title="顺序" width="80"> </vxe-column>
            <vxe-column title="操作" width="90" align="center" fixed="right">
              <template #default="{ row }">
                <vxe-button type="text" status="primary" icon="vxe-icon-edit" circle @click.native="editEventDialog(row)" class="spanIcon"></vxe-button>
                <vxe-button type="text" status="danger" icon="vxe-icon-delete" circle @click.native="deleteEvent(row)" class="spanIcon"></vxe-button>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </Pane>

    </Splitpanes>
    <el-dialog :title="titleType()" :show-close="false" v-model="definitionDialog" append-to-body :close-on-click-modal="false" width="500px">
      <el-form ref="definitionFormRef" :model="definitionForm" :rules="definitionFormRule" label-width="100px" class="form-input-m" inline-message>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="code" label="编码">
              <el-input type="text" v-model="definitionForm.code" placeholder="请输入编码" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="name" label="名称">
              <el-input type="text" v-model="definitionForm.name" placeholder="请输入名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="relevant" label="关联单据">
              <el-input type="text" v-model="definitionForm.relevant" placeholder="请输入关联单据" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="url" label="业务url">
              <el-input type="text" v-model="definitionForm.url" placeholder="请输入业务url" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="bz" label="备注">
              <el-input type="textarea" v-model="definitionForm.remark" placeholder="备注说明" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="状态">
              <el-switch v-model="definitionForm.isEnable" inline-prompt active-text="是" inactive-text="否"></el-switch>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item prop="order" label="排序">
              <el-input-number v-model="definitionForm.seq" :min="1" :max="1000" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="dialog-footer flex right justify-end">
        <el-button type="primary" @click="saveDefinition('definitionFormRef')">保存</el-button>
        <el-button @click="closeDefinitionDialog('definitionFormRef')">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="节点维护" :show-close="false" v-model="nodeDialog" append-to-body :close-on-click-modal="false" width="500px">
      <el-form ref="nodeFormRef" :model="nodeForm" :rules="nodeFormRule" :disabled="nodeForm.activityType!=='flowEvent'" label-width="100px" class="form-input-m" inline-message>
        <el-row>
          <el-col :span="24">
            <el-form-item label="所属流程">
              <el-input type="text" v-model="sltDefinition.name" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="code" label="节点编码">
              <el-input type="text" v-model="nodeForm.code" placeholder="请输入节点编码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="name" label="节点名称">
              <el-input type="text" v-model="nodeForm.name" placeholder="请输入节点名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="activityType" label="节点类型">
              <el-select v-model="nodeForm.activityType" filterable placeholder="请选择节点类型" disabled>
                <el-option v-for="activityType in activityTypeList" :key="activityType.id" :label="activityType.name" :value="activityType.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="审批人员" prop="approverIds">
              <el-select v-model="nodeForm.approverIds" filterable multiple placeholder="审批人员">
                <template v-for="(dot,idx) in userList" :key="idx">
                  <el-option :label="dot.realname" :value="dot.id"></el-option>
                </template>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="url" label="路径">
              <el-input type="text" v-model="nodeForm.url" placeholder="请输入路径"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="seq" label="排序">
              <el-input-number v-model="nodeForm.seq" :min="1" :max="1000" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="dialog-footer flex right justify-end">
        <el-button type="primary" @click="saveNode('nodeFormRef')">保存</el-button>
        <el-button @click="closeNodeDialog('nodeFormRef')">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="事件维护" :show-close="false" v-model="eventDialog" append-to-body :close-on-click-modal="false" width="500px">
      <el-form ref="eventFormRef" :model="eventForm" :rules="eventFormRule" label-width="100px" class="form-input-m" inline-message>
        <el-row>
          <el-col :span="24">
            <el-form-item label="所属节点">
              <el-input type="text" v-model="sltNode.name" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="name" label="事件名称">
              <el-input type="text" v-model="eventForm.name" placeholder="请输入节点名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="code" label="事件编码">
              <el-input type="text" v-model="eventForm.code" placeholder="请输入节点编码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="nextNode" label="下一节点">
              <el-select v-model="eventForm.nextNode" placeholder="请选择">
                <el-option v-for="item in nodeList" :key="item.id" :label="item.name" :value="item.id" :disabled="item.id==sltNode.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="seq" label="排序">
              <el-input-number v-model="eventForm.seq" :min="1" :max="1000" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="dialog-footer flex right justify-end">
        <el-button type="primary" @click="saveEvent('eventFormRef')">保存</el-button>
        <el-button @click="closeEventDialog('eventFormRef')">取消</el-button>
      </div>
    </el-dialog>
    </div>
   
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, nextTick, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue'; //面包屑
import { Splitpanes, Pane } from 'splitpanes';
let { proxy }: any = getCurrentInstance();
import type { FormInstance } from 'element-plus';
import { VXETable } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示框
import { AppStore } from '../../stores/store';
import { isEmpty } from 'lodash';

let store = AppStore();
let sltDefinition: any = ref({});
let sltNode: any = ref({});
let dLoading = ref(false);
let nLoading = ref(false);
let eLoading = ref(false);

let definitionDialog = ref(false);
let nodeDialog = ref(false);
let eventDialog = ref(false);
let userList: any = reactive([]);
let activityTypeList: any = reactive([]); //选择字典
let definitionList: any = reactive([]);
let nodeList: any = reactive([]);
let eventList: any = reactive([]);
let definitionForm = reactive({
  id: null,
  code: '',
  name: '',
  relevant: '',
  url: '',
  remark: '',
  seq: 0,
  isEnable: true,
  orgId: ''
});
// 最左侧动态表弹框表单校验
let definitionFormRule = {
  name: [
    {
      required: true,
      message: '请输入名称',
      trigger: 'blur'
    },
    {
      min: 2,
      max: 20,
      message: '长度为2到20个字符',
      trigger: 'blur'
    }
  ]
};

let nodeForm = reactive({
  id: null,
  code: '',
  name: '',
  definitionId: '',
  activityType: '',
  url: '',
  seq: 0,
  orgId: '',
  approverIds: []
});
// 最左侧动态表弹框表单校验
let nodeFormRule = {
  name: [
    {
      required: true,
      message: '请输入名称',
      trigger: 'blur'
    },
    {
      min: 2,
      max: 20,
      message: '长度为2到20个字符',
      trigger: 'blur'
    }
  ]
};

let eventForm = reactive({
  id: null,
  definitionId: '',
  nodeId: '',
  nextNode: '',
  code: '',
  name: '',
  seq: 0,
  orgId: ''
});
// 最左侧动态表弹框表单校验
let eventFormRule = {
  name: [
    {
      required: true,
      message: '请输入名称',
      trigger: 'blur'
    },
    {
      min: 2,
      max: 20,
      message: '长度为2到20个字符',
      trigger: 'blur'
    }
  ]
};

let searchForm = {
  searchValue: ''
};

onMounted(() => {
  findDefinitionList();
  getDictItemsList(); //批量获取字典
  getUserOptions();
});

//批量获取字典
async function getDictItemsList() {
  let dictTreeTypeCodes: any = ['activityType'];
  const codes = dictTreeTypeCodes.join(',');
  const url = '/api/sys/basDictDetail/findDictDetailListByDictCodes';
  const dictTreeTypeItems: any = await proxy.$http.get(url, { params: { code: codes } });
  const activityType = dictTreeTypeItems.data.find((item) => item.code === 'activityType');
  activityTypeList.push(...activityType.detailDataList);
}

function getUserOptions() {
  const url = '/api/user/getUserInfoList';
  proxy.$http
    .get(url, {})
    .then((res: any) => {
      userList.push(...res.data);
      // console.log('获取所有可用用户', userOptions);
    })
    .catch((err: any) => {
      VxeMessage('获取所有用户选项 (下拉框)失败', VxeNotifyType.error);
    });
}

// 回车查询
function keyupEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findDefinitionList();
  }
}
function findDefinitionList() {
  dLoading.value = true;
  definitionList.length = 0; //放入数据前清空数据
  const url = '/api/sys/flowDefinition/findDefinitionList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: { seachValue: searchForm.searchValue }
    })
    .then((res: any) => {
      definitionList.push(...res.data);
      definitionRowClick({ row: definitionList[0] }); //默认选中第一条数据
      dLoading.value = false;
    })
    .catch((err: any) => {
      dLoading.value = false;
      // VxeMessage('获取动态字典表列表失败',VxeNotifyType.error)
    });
}

function definitionRowClick({ row }: any) {
  (proxy.$refs.definitionRef as any).setCurrentRow(row);
  sltDefinition.value = row;
  getNodeList();
}

function addDefinitionDialog() {
  definitionForm.seq = definitionList.length + 1;
  definitionDialog.value = true;
}

function saveDefinition(formName: any) {
  let $el = proxy.$refs[formName];
  $el.validate((valid: any) => {
    if (!valid) {
      return false;
    }
    if (definitionForm.id == null) {
      const url = '/api/sys/flowDefinition/addDefinition';
      const definition = {
        code: definitionForm.code,
        name: definitionForm.name,
        relevant: definitionForm.relevant,
        url: definitionForm.url,
        seq: definitionForm.seq,
        remark: definitionForm.remark,
        isEnable: definitionForm.isEnable,
        orgId: store.userInfo.orgId
      };
      proxy.$http
        .post(url, definition)
        .then((res: any) => {
          VxeMessage('新增成功', VxeNotifyType.success);
          clearDefinitionForm();
          definitionDialog.value = false;
          findDefinitionList(); //重新获取动态字典表数据
        })
        .catch((err: any) => {
          VxeMessage('新增失败', VxeNotifyType.error);
        });
    } else {
      const url = '/api/sys/flowDefinition/editDefinition';
      const definition = {
        id: definitionForm.id,
        code: definitionForm.code,
        name: definitionForm.name,
        relevant: definitionForm.relevant,
        url: definitionForm.url,
        seq: definitionForm.seq,
        remark: definitionForm.remark,
        isEnable: definitionForm.isEnable,
        orgId: definitionForm.orgId ? definitionForm.orgId : store.userInfo.orgId
      };
      proxy.$http
        .post(url, definition)
        .then((res: any) => {
          VxeMessage('修改成功', VxeNotifyType.success);
          clearDefinitionForm();
          definitionDialog.value = false;
          findDefinitionList();
        })
        .catch((err: any) => {
          VxeMessage('修改失败', VxeNotifyType.error);
        });
    }
  });
}

function editDefinitionDialog(row: any) {
  definitionForm.id = row.id;
  definitionForm.code = row.code;
  definitionForm.name = row.name;
  definitionForm.relevant = row.relevant;
  definitionForm.url = row.url;
  definitionForm.remark = row.remark;
  definitionForm.seq = row.seq;
  definitionForm.isEnable = row.isEnable;
  definitionForm.orgId = row.orgId;
  definitionDialog.value = true;
}

function deleteDefinition(row: any) {
  proxy
    .$confirm('确定删除？', '提示', {
      cancelButtonClass: 'cancel-button',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(async () => {
      const url = '/api/sys/flowDefinition/deleteDefinition';
      proxy.$http.post(url, row).then((res: any) => {
        if (res.status.code === 400) {
          VxeMessage('删除失败', VxeNotifyType.error);
        } else {
          findDefinitionList();
          VxeMessage('删除成功', VxeNotifyType.success);
        }
      });
    })
    .catch((err: any) => {
      // VxeMessage(err, VxeNotifyType.error);
    });
}
function closeDefinitionDialog(formName: any) {
  let $ele = proxy.$refs[formName];
  $ele.clearValidate(); //移除校验结果
  clearDefinitionForm();
  definitionDialog.value = false;
}

function clearDefinitionForm() {
  definitionForm.id = null;
  definitionForm.code = '';
  definitionForm.name = '';
  definitionForm.relevant = '';
  definitionForm.url = '';
  definitionForm.remark = '';
  definitionForm.seq = 0;
  definitionForm.isEnable = true;
  definitionForm.orgId = '';
}

function titleType() {
  if (definitionForm.id) {
    return `编辑流程`;
  } else if (!definitionForm.id) {
    return `新建流程`;
  }
}
function getNodeList() {
  nLoading.value = true;
  nodeList.length = 0; //放入数据前清空数据
  const url = '/api/sys/flowNode/findNodeList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: { definitionId: sltDefinition.value.id }
    })
    .then((res: any) => {
      nodeList.push(...res.data);
      nodeRowClick({ row: nodeList[0] }); //默认选中第一条数据
      nLoading.value = false;
    })
    .catch((err: any) => {
      nLoading.value = false;
      // VxeMessage('获取动态字典表列表失败',VxeNotifyType.error)
    });
}

function nodeRowClick({ row }: any) {
  (proxy.$refs.nodeRef as any).setCurrentRow(row);
  sltNode.value = row;
  getNodeEventList();
}

function addNodeDialog() {
  if (isEmpty(sltDefinition)) {
    VxeMessage('请先选择流程', VxeNotifyType.error);
    return;
  }
  nodeForm.seq = nodeList.length;
  nodeForm.definitionId = sltDefinition.value.id;
  nodeForm.activityType = 'flowEvent';
  nodeDialog.value = true;
}

function saveNode(formName: any) {
  let $el = proxy.$refs[formName];
  $el.validate((valid: any) => {
    if (!valid) {
      return false;
    }
    if (nodeForm.id == null) {
      const url = '/api/sys/flowNode/addNode';
      const obj = {
        code: nodeForm.code,
        name: nodeForm.name,
        definitionId: nodeForm.definitionId,
        url: nodeForm.url,
        seq: nodeForm.seq,
        activityType: nodeForm.activityType,
        orgId: store.userInfo.orgId,
        approverIds: nodeForm.approverIds
      };
      proxy.$http
        .post(url, obj)
        .then((res: any) => {
          VxeMessage('新增成功', VxeNotifyType.success);
          clearNodeForm();
          nodeDialog.value = false;
          getNodeList(); //重新获取动态字典表数据
        })
        .catch((err: any) => {
          VxeMessage('新增失败', VxeNotifyType.error);
        });
    } else {
      const url = '/api/sys/flowNode/editNode';
      const obj = {
        id: nodeForm.id,
        code: nodeForm.code,
        name: nodeForm.name,
        definitionId: nodeForm.definitionId,
        url: nodeForm.url,
        seq: nodeForm.seq,
        activityType: nodeForm.activityType,
        orgId: nodeForm.orgId ? nodeForm.orgId : store.userInfo.orgId,
        approverIds: nodeForm.approverIds
      };
      proxy.$http
        .post(url, obj)
        .then((res: any) => {
          VxeMessage('修改成功', VxeNotifyType.success);
          clearNodeForm();
          nodeDialog.value = false;
          getNodeList();
        })
        .catch((err: any) => {
          VxeMessage('修改失败', VxeNotifyType.error);
        });
    }
  });
}

function editNodeDialog(row: any) {
  nodeForm.id = row.id;
  nodeForm.code = row.code;
  nodeForm.name = row.name;
  nodeForm.definitionId = row.definitionId;
  nodeForm.url = row.url;
  nodeForm.activityType = row.activityType;
  nodeForm.seq = row.seq;
  nodeForm.orgId = row.orgId;
  nodeForm.approverIds = row.approverIds ? row.approverIds : [];

  nodeDialog.value = true;
}

function deleteNode(row: any) {
  proxy
    .$confirm('确定删除？', '提示', {
      cancelButtonClass: 'cancel-button',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(async () => {
      const url = '/api/sys/flowNode/deleteNode';
      proxy.$http.post(url, row).then((res: any) => {
        if (res.status.code === 400) {
          VxeMessage(res.status.msg, VxeNotifyType.error);
        } else {
          getNodeList();
          VxeMessage('删除成功', VxeNotifyType.success);
        }
      });
    })
    .catch((err: any) => {
      // VxeMessage(err, VxeNotifyType.error);
    });
}

function closeNodeDialog(formName: any) {
  let $ele = proxy.$refs[formName];
  $ele.clearValidate(); //移除校验结果
  clearNodeForm();
  nodeDialog.value = false;
}

function clearNodeForm() {
  nodeForm.id = null;
  nodeForm.code = '';
  nodeForm.name = '';
  nodeForm.definitionId = '';
  nodeForm.url = '';
  nodeForm.activityType = '';
  nodeForm.seq = 0;
  nodeForm.orgId = '';
  nodeForm.approverIds = [];
}

function getNodeEventList() {
  eLoading.value = true;
  eventList.length = 0; //放入数据前清空数据
  const url = '/api/sys/flowNodeEvent/findEventList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: { nodeId: sltNode.value.id }
    })
    .then((res: any) => {
      eventList.push(...res.data);
      eLoading.value = false;
    })
    .catch((err: any) => {
      eLoading.value = false;
      // VxeMessage('获取动态字典表列表失败',VxeNotifyType.error)
    });
}

function addEventDialog() {
  if (isEmpty(sltNode)) {
    VxeMessage('请选择节点', VxeNotifyType.error);
    return;
  }
  eventForm.seq = eventList.length + 1;
  eventForm.definitionId = sltDefinition.value.id;
  eventForm.nodeId = sltNode.value.id;
  eventDialog.value = true;
}

function editEventDialog(row: any) {
  eventForm.id = row.id;
  eventForm.definitionId = row.definitionId;
  eventForm.nodeId = row.nodeId;
  eventForm.nextNode = row.nextNode;
  eventForm.code = row.code;
  eventForm.name = row.name;
  eventForm.seq = row.seq;
  eventForm.orgId = row.orgId;
  eventDialog.value = true;
}

function saveEvent(formName: any) {
  let $el = proxy.$refs[formName];
  $el.validate((valid: any) => {
    if (!valid) {
      return false;
    }
    if (eventForm.id == null) {
      const url = '/api/sys/flowNodeEvent/addEvent';
      const obj = {
        definitionId: eventForm.definitionId,
        nodeId: eventForm.nodeId,
        nextNode: eventForm.nextNode,
        code: eventForm.code,
        name: eventForm.name,
        seq: eventForm.seq,
        orgId: store.userInfo.orgId
      };
      proxy.$http
        .post(url, obj)
        .then((res: any) => {
          VxeMessage('新增成功', VxeNotifyType.success);
          clearEventForm();
          eventDialog.value = false;
          getNodeEventList(); //重新获取动态字典表数据
        })
        .catch((err: any) => {
          VxeMessage('新增失败', VxeNotifyType.error);
        });
    } else {
      const url = '/api/sys/flowNodeEvent/editEvent';
      const obj = {
        id: eventForm.id,
        definitionId: eventForm.definitionId,
        nodeId: eventForm.nodeId,
        nextNode: eventForm.nextNode,
        code: eventForm.code,
        name: eventForm.name,
        seq: eventForm.seq,
        orgId: eventForm.orgId ? eventForm.orgId : store.userInfo.orgId
      };
      proxy.$http
        .post(url, obj)
        .then((res: any) => {
          VxeMessage('修改成功', VxeNotifyType.success);
          clearEventForm();
          eventDialog.value = false;
          getNodeEventList();
        })
        .catch((err: any) => {
          VxeMessage('修改失败', VxeNotifyType.error);
        });
    }
  });
}
function deleteEvent(row: any) {
  proxy
    .$confirm('确定删除？', '提示', {
      cancelButtonClass: 'cancel-button',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(async () => {
      const url = '/api/sys/flowNodeEvent/deleteEvent';
      proxy.$http.post(url, row).then((res: any) => {
        if (res.status.code == 400) {
          VxeMessage(res.status.msg, VxeNotifyType.error);
        } else {
          getNodeList();
          VxeMessage('删除成功', VxeNotifyType.success);
        }
      });
    })
    .catch((err: any) => {
      // VxeMessage(err, VxeNotifyType.error);
    });
}
function closeEventDialog(formName: any) {
  let $ele = proxy.$refs[formName];
  $ele.clearValidate(); //移除校验结果
  clearEventForm();
  eventDialog.value = false;
}
function clearEventForm() {
  eventForm.id = null;
  eventForm.definitionId = '';
  eventForm.nodeId = '';
  eventForm.nextNode = '';
  eventForm.code = '';
  eventForm.name = '';
  eventForm.seq = 0;
  eventForm.orgId = '';
}

function getIsEnableTagType(row: any) {
  if (row.isEnable) {
    return 'success';
  } else {
    return 'danger';
  }
}

// 获取是否静态文字(是/否)
function getIsEnableTagDesc(row: any) {
  if (row.isEnable) {
    return '是';
  } else {
    return '否';
  }
}
</script>

<style lang="scss" scoped>
#flowDefinitionDiv {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);
  }
  .splitpanes {
    background-color:$base-white;
    height: 100%;

    // 附加按钮间距
    .button-blue {
      margin: 5px 0 5px 5px;
    }

    // 中间
    .designTable,
    .tableBox {
      width: 100%;
      height: calc(100% - 40px);
      .spanIcon {
        padding: 0.1em 0.5em !important;
      }
    }
  }
}
</style>
